<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>HEART-AREA</title>

    <link rel="stylesheet" href="../css/tucao-area.css" media="screen" type="text/css">
    <!--字体图标库-->
    <link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <!--bootstrap-->
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7/dist/css/bootstrap.min.css">
    <!--导航求-->
    <link rel="stylesheet" href="../lib/css/gooey.min.css">
    <!--滚动条-->
    <link rel="stylesheet" href="../lib/css/scrollBar.css">
    <!--消息提示组件 CSS-->
    <link rel="stylesheet" href="../lib/spop-gh-pages/dist/spop.css">
    <!--底部分页组件CSS-->
    <link rel="stylesheet" href="../lib/css/jquery.pagination.css">
    <!--左下角导航栏 CSS-->
    <link rel="stylesheet" type="text/css" href="../lib/css/nav.css">
</head>

<body onload="run();">
<!--整体布局放在森林背景上-->
<div style="position: relative;z-index: 9999">
    <!--左下角导航栏-->
    <div class="leftNav-item">
        <ul>
            <li>
                <i class="fa fa-search"></i>
                <a class="rota" data-toggle="modal" data-target="#searchHeart">查找</a>
            </li>
            <li title="排序">
                <i class="fa fa-sort-amount-desc"></i>
                <a class="rota" data-toggle="modal" data-target="#sortHeart">排序</a>
            </li>
            <li>
                <i class="fa fa-reply-all"></i>
                <a href="welcome-after.html" class="rota">返回</a>
            </li>
        </ul>
    </div>

    <!--右侧 导航栏-->
    <div class="box-right">
        <nav id="gooey">
            <input type="checkbox" class="menu-open" name="menu-open" id="menu-open"/>

            <label class="open-button" for="menu-open">
                <span class="burger burger-1"></span>
                <span class="burger burger-2"></span>
                <span class="burger burger-3"></span>
            </label>

            <a href="news.html" class="gooey-menu-item" title="首页">
                <i class="fa fa-home"></i>
            </a>
            <a href="tucao-area.html" class="gooey-menu-item" title="吐槽墙">
                <i class="fa fa-comments-o"></i>
            </a>
            <a href="heart-area.html" class="gooey-menu-item" title="心灵小组">
                <i class="fa fa-sun-o"></i>
            </a>
            <a href="manage-my.html" class="gooey-menu-item" title="管理我的">
                <i class="fa fa-user"></i>
            </a>
            <a class="gooey-menu-item" data-toggle="modal" data-target="#addHeart" title="发布">
                <i class="fa fa-plus"></i>
            </a>
        </nav>
    </div>

    <!-- 搜索 -->
    <div id="searchHeart" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-title">
                    <h3 class="text-center">搜索鸡汤</h3>
                </div>
                <div class="modal-body">
                    <div id="heartSearchForm" class="form-group">
                        <div class="form-group">
                            <label for="heart-find-sort">筛选条件</label>
                            <select id="heart-find-sort" class="form-control">
                                <option>按鸡汤内容查找</option>
                                <option>按发布鸡汤用户名查找</option>
                            </select>
                            <br>
                            <div class="form-group">
                                <label for="heart-find-content">查找条件</label>
                                <textarea class="form-control" id="heart-find-content" style="resize: vertical;" placeholder="请输入查找的内容"></textarea>
                            </div>
                        </div>
                        <br>
                        <div class="form-group">
                            <button id="searchHeartBtn" class="btn btn-primary btn-block" type="submit">搜索</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 排序 -->
    <div id="sortHeart" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-title">
                    <h3 class="text-center">鸡汤排序</h3>
                </div>
                <div class="modal-body">
                    <div id="heartSortForm" class="form-group">
                        <div class="form-group">
                            <label for="heart-sort-by">排序条件</label>
                            <select id="heart-sort-by" class="form-control">
                                <option>按发布时间升序</option>
                                <option>按发布时间降序</option>
                                <option>按点赞数升序</option>
                                <option>按点赞数降序</option>
                                <option>按评论数升序</option>
                                <option>按评论数降序</option>
                            </select>
                        </div>
                        <br>
                        <div class="form-group">
                            <button id="sortHeartBtn" class="btn btn-primary btn-block" type="submit">排序</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 发布鸡汤 -->
    <div id="addHeart" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-title">
                    <h3 class="text-center">发布鸡汤</h3>
                </div>
                <div class="modal-body">
                    <div id="heartForm" class="form-group">
                        <div class="form-group">
                            <label for="heart-content">内容</label>
                            <textarea class="form-control" id="heart-content" style="resize: vertical;" placeholder="说一些你美好的经历吧~"></textarea>
                        </div>
                        <br>
                        <div class="form-group">
                            <button id="addHeartBtn" class="btn btn-primary btn-block" type="submit">发布</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 管理我的发布 -->
    <div id="myHeart" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-title">
                    <h3 class="text-center">我的发布</h3>
                </div>
                <div class="modal-body">

                </div>
            </div>
        </div>
    </div>

    <!--心灵小组内容展示-->
    <div class="tucao-content">
        <!--0-->
        <div id="heart0" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username0"></span>
                </div>
                <div class="time">
                    <span id="time0"></span>&nbsp;&nbsp;<span id="place0"></span>
                </div>
            </div>
            <!--内容-->
            <div class="content">
                <span id="heartId0" style="display: none"></span>
                <span id="heartContent0" style="cursor:pointer;">

                </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum0"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum0"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn0"><i id="likeCron0" class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
        <!--1-->
        <div id="heart1" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username1"></span>
                </div>
                <div class="time">
                    <span id="time1"></span>&nbsp;&nbsp;<span id="place1"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="heartId1" style="display: none"></span>
                <span id="heartContent1" style="cursor:pointer;">

                </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum1"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum1"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn1"><i id="likeCron1" class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
        <!--2-->
        <div id="heart2" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username2"></span>
                </div>
                <div class="time">
                    <span id="time2"></span>&nbsp;&nbsp;<span id="place2"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="heartId2" style="display: none"></span>
                <span id="heartContent2" style="cursor:pointer;">

                </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum2"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum2"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn2"><i id="likeCron2" class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
        <!--3-->
        <div id="heart3" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username3"></span>
                </div>
                <div class="time">
                    <span id="time3"></span>&nbsp;&nbsp;<span id="place3"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="heartId3" style="display: none"></span>
                <span id="heartContent3" style="cursor:pointer;">

                </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum3"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum3"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn3"><i id="likeCron3" class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
        <!--4-->
        <div id="heart4" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username4"></span>
                </div>
                <div class="time">
                    <span id="time4"></span>&nbsp;&nbsp;<span id="place4"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="heartId4" style="display: none"></span>
                <span id="heartContent4" style="cursor:pointer;">

                </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum4"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum4" ></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn4"><i id="likeCron4" class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
        <!--5-->
        <div id="heart5" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username5"></span>
                </div>
                <div class="time">
                    <span id="time5"></span>&nbsp;&nbsp;<span id="place5"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="heartId5" style="display: none"></span>
                <span id="heartContent5" style="cursor:pointer;">

                </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum5"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum5"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn5"><i id="likeCron5" class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
        <!--6-->
        <div id="heart6" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username6"></span>
                </div>
                <div class="time">
                    <span id="time6"></span>&nbsp;&nbsp;<span id="place6"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="heartId6" style="display: none"></span>
                <span id="heartContent6" style="cursor:pointer;">

                </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum6"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum6"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn6"><i id="likeCron6" class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
        <!--7-->
        <div id="heart7" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username7"></span>
                </div>
                <div class="time">
                    <span id="time7"></span>&nbsp;&nbsp;<span id="place7"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="heartId7" style="display: none"></span>
                <span id="heartContent7" style="cursor:pointer;">

                </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum7"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum7"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn7"><i id="likeCron7" class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
        <!--8-->
        <div id="heart8" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username8"></span>
                </div>
                <div class="time">
                    <span id="time8"></span>&nbsp;&nbsp;<span id="place8"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="heartId8" style="display: none"></span>
                <span id="heartContent8" style="cursor:pointer;">

                </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum8"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum8"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn8"><i id="likeCron8" class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
        <!--9-->
        <div id="heart9" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username9"></span>
                </div>
                <div class="time">
                    <span id="time9"></span>&nbsp;&nbsp;<span id="place9"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="heartId9" style="display: none"></span>
                <span id="heartContent9" style="cursor:pointer;">

                </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum9"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum9"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn9"><i id="likeCron9" class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
    </div>

    <!--底部分页-->
    <div class="bottom-search">
        <div id="pagination" style="position: relative;width: 1000px;left: 300px"></div>
    </div>

</div>

<!--背景 下雨特效-->
<img id="background" alt="background" src="" style="height: 100%;width: 100%"/>

<!--jquery 1.11.0-->
<script src="../lib/js/jquery-1.11.0.min.js"></script>
<!--右侧导航球-->
<script src="../lib/js/gooey.min.js"></script>
<!--Bootstrap-->
<script src="../lib/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<!--滚动条-->
<script src="../lib/js/scrollBar.js"></script>
<!--雨玻璃背景-->
<script src="../lib/js/rainyday.min.js"></script>
<!--定位当前城市-->
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<!--消息提示组件-->
<script src="../lib/spop-gh-pages/dist/spop.js"></script>
<!--底部分页组件JS-->
<script src="../lib/js/jquery.pagination.min.js"></script>
<!--自定义JS-->
<script src="../js/heart-area.js"></script>
</body>

</html>